<ng-template #renderItemTemplate let-type let-page="page">
  <a class="{{prefixCls}}-item-link" *ngIf="type==='pre'">
    <i apes-icon apesType="left"></i>
  </a>
  <a class="{{prefixCls}}-item-link" *ngIf="type==='next'">
    <i apes-icon apesType="right"></i>
  </a>
  <a *ngIf="type=='page'">{{ page }}</a>
</ng-template>
<ng-container *ngIf="(apesHideOnSinglePage && (apesTotal>apesPageSize)) || (apesTotal && !apesHideOnSinglePage)">
  <ul class="{{prefixCls}}"
      [class.apes-table-pagination]="apesInTable"
      [class.apes-pagination-simple]="apesSimple"
      [class.apes-pagination-disabled]="apesDisabled"
      [class.mini]="(apesSize === 'small') && !apesSimple">
    <ng-container *ngIf="apesSimple; else normalTemplate">
      <li
        class="{{prefixCls}}-prev"
        [attr.title]="locale.prev_page"
        [class.ant-pagination-disabled]="isFirstIndex"
        (click)="jumpDiff(-1)">
        <ng-template [ngTemplateOutlet]="itemRender" [ngTemplateOutletContext]="{ $implicit: 'pre'}"></ng-template>
      </li>
      <li [attr.title]="apesPageIndex+'/'+lastIndex" class="{{prefixCls}}-simple-pager">
        <input
          #simplePagerInput
          [disabled]="apesDisabled"
          [value]="apesPageIndex"
          (keydown.enter)="handleKeyDown($event,simplePagerInput,false)"
          size="3">
        <span class="{{prefixCls}}-slash">／</span>
        {{ lastIndex }}
      </li>
      <li class="{{prefixCls}}-next"
          [attr.title]="locale.next_page"
          [class.apes-pagination-disabled]="isLastIndex"
          (click)="jumpDiff(1)">
        <ng-template [ngTemplateOutlet]="itemRender" [ngTemplateOutletContext]="{ $implicit: 'next'}"></ng-template>
      </li>
    </ng-container>
    <ng-template #normalTemplate>
      <li class="{{prefixCls}}-total-text" *ngIf="apesShowTotal">
        <ng-template [ngTemplateOutlet]="apesShowTotal"
                     [ngTemplateOutletContext]="{ $implicit: apesTotal,range:ranges }"></ng-template>
      </li>
      <li class="{{prefixCls}}-prev"
          [attr.title]="firstIndex"
          [class.apes-pagination-disabled]="isFirstIndex"
          (click)="jumpPage(firstIndex)">
        <ng-template [ngTemplateOutlet]="apesItemRender" [ngTemplateOutletContext]="{ $implicit: 'pre'}"></ng-template>
      </li>
      <li
        class="{{prefixCls}}-item"
        [attr.title]="firstIndex"
        [class.apes-pagination-item-active]="isFirstIndex"
        (click)="jumpPage(firstIndex)">
        <ng-template [ngTemplateOutlet]="itemRender"
                     [ngTemplateOutletContext]="{ $implicit: 'page',page: firstIndex }"></ng-template>
      </li>
      <li
        class="{{prefixCls}}-jump-prev"
        *ngIf="(lastIndex >9)&&(apesPageIndex-3>firstIndex)"
        [attr.title]="locale.prev_5"
        (click)="jumpDiff(-5)">
        <a class="{{prefixCls}}-item-link">
          <div class="{{prefixCls}}-item-container">
            <i apes-icon apesType="double-left" class="{{prefixCls}}-item-link-icon"></i>
            <span class="{{prefixCls}}-item-ellipsis">•••</span>
          </div>
        </a>
      </li>
      <li class="{{prefixCls}}-item"
          *ngFor="let page of pages"
          [attr.title]="page"
          [class.apes-pagination-item-active]="apesPageIndex==page"
          (click)="jumpPage(page)">
        <ng-template [ngTemplateOutlet]="itemRender"
                     [ngTemplateOutletContext]="{ $implicit: 'page',page: page }"></ng-template>
      </li>
      <li class="{{prefixCls}}-jump-next"
          [attr.title]="locale.next_5"
          (click)="jumpDiff(5)"
          *ngIf="(lastIndex >9)&&(apesPageIndex+3<lastIndex)">
        <a class="{{prefixCls}}-item-link">
          <div class="{{prefixCls}}-item-container">
            <i apes-icon apesType="double-right" class="{{prefixCls}}-item-link-icon"></i>
            <span class="{{prefixCls}}-item-ellipsis">•••</span>
          </div>
        </a>
      </li>
      <li class="{{prefixCls}}-item"
          [attr.title]="lastIndex"
          (click)="jumpPage(lastIndex)"
          *ngIf="(lastIndex>0)&&(lastIndex!==firstIndex)"
          [class.apes-pagination-item-active]="isLastIndex">
        <ng-template [ngTemplateOutlet]="itemRender"
                     [ngTemplateOutletContext]="{ $implicit: 'page',page: lastIndex }"></ng-template>
      </li>
      <li class="{{prefixCls}}-next"
          [title]="locale.next_page"
          [class.apes-pagination-disabled]="isLastIndex"
          (click)="jumpDiff(1)">
        <ng-template [ngTemplateOutlet]="itemRender" [ngTemplateOutletContext]="{ $implicit: 'next'}"></ng-template>
      </li>
      <div class="{{prefixCls}}-options" *ngIf="apesShowQuickJumper||apesShowSizeChanger">
        <ng-select *ngIf="apesShowSizeChanger"
                   [items]="apesPageSizeOptions"
                   bindValue="value"
                   [ngModel]="apesPageSize"
                   (change)="onPageSizeChange($event)">
          <ng-template ng-option-tmp let-item="item" let-index="index">
            {{item + locale.items_per_page}}
          </ng-template>
        </ng-select>
        <div class="{{prefixCls}}-options-quick-jumper"
             *ngIf="apesShowQuickJumper">
          {{ locale.jump_to }}
          <input #quickJumperInput (keydown.enter)="handleKeyDown($event,quickJumperInput,true)">
          {{ locale.page }}
        </div>
      </div>
    </ng-template>
  </ul>
</ng-container>
